<template>
  <div style="height: 100%; width: 100%">
    <top-sidebar />
    <div
      v-if="showMenu"
      style="
        display: flex; /* 父容器开启Flex */
        justify-content: center; /* 水平居中 */
        align-items: center;
        width: 100%;
        height: calc(100% - 35px);
      "
    >
      <el-card style="width: 40%">
        <br/>
        <p><el-button type="primary" style="width: 100%;height: 70px;font-size: 40px;" @click="toDataManager">基础数据管理</el-button></p>
        <br/><br/>
        <p><el-button type="primary" style="width: 100%;height: 70px;font-size: 40px;" @click="toBoard">备货可视化看板</el-button></p>
        <br/>
      </el-card>
    </div>
    <Customer v-if="showData" @close="close"></Customer>
    <Board v-if="showBoard" @close="close"></Board>
  </div>
</template>

<script setup>
import useSettingsStore from "@/store/modules/settings";
import { handleThemeStyle } from "@/utils/theme";
import TopSidebar from "@/layout/components/TopSidebar/index.vue";
import Customer from "@/views/customer/index.vue";
import Board from "@/views/board/index.vue";
import useAppStore from "@/store/modules/app";
import { ElMessage } from "element-plus";

const appStore = useAppStore();
appStore.version = import.meta.env.VITE_VERSION;
const showData = ref(false);
const showMenu = ref(true);
const showBoard = ref(false)

let msgs = ref([]);
let isStart = ref(false);

const toDataManager = ()=>{
  showMenu.value =false;
  showData.value = true;
  showBoard.value = false;
}

const toBoard = ()=>{
  showMenu.value =false;
  showData.value = false;
  showBoard.value = true;
}

const close = ()=>{
  showMenu.value =true;
  showData.value = false;
  showBoard.value = false;
}



watch(
  msgs,
  (newVal, oldVal) => {
    const container = document.getElementById("msg");
    setTimeout(() => {
      container.scrollTop = container.scrollHeight;
    }, 0);
  },
  { deep: true }
);

function msgsPush(s) {
  if (s) {
    msgs.value.push(s + "。");
  }
}

// 监听主进程
window.addEventListener("msg", msg);
window.addEventListener("status", status);

function msg(event) {
  msgsPush(event.detail);
}

function status(event) {
  isStart.value = event.detail;
}

onMounted(() => {
  nextTick(() => {
    // 初始化主题样式
    handleThemeStyle(useSettingsStore().theme);

    // 获取跟新弹窗元素
    const popup = document.getElementById("updatePopup");
    const closeBtn = document.getElementsByClassName("close-btn")[0];
    // 关闭弹窗
    closeBtn.onclick = function () {
      if ("MUST" === updateType) {
        ElMessage.warning(tipsMessage);
        return;
      }
      popup.style.display = "none";
    };
  });
});
</script>

<style lang='scss' scoped>
/* 隐藏弹出窗口 */
/* 弹出窗口样式 */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  display: none;
  z-index: 999;
}

.popup-content {
  background-color: #fff;
  padding: 24px;
  border: 1px solid #dcdfe6;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
  text-align: center;
  border-radius: 0; /* 确保边角是有棱有角的 */
}

.popup-content h2 {
  margin-top: 0;
  color: #303133;
}

.popup-content p {
  color: #909399;
  margin-bottom: 20px;
}

.close-btn {
  float: right;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: #c0c4cc;
  transition: color 0.3s;
}

.close-btn:hover {
  color: #909399;
}

.button-group {
  display: flex;
  justify-content: space-between;
}

.updateButton {
  padding: 12px 20px;
  border: none;
  background-color: #f5f7fa;
  color: #606266;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 0; /* 确保按钮边角是有棱有角的 */
  flex: 1;
  margin: 0 4px;
}

button#updateYes {
  background-color: #409eff;
  color: white;
}

button#updateYes:hover {
  background-color: #66b1ff;
}

button#updateNo:hover {
  background-color: #e9ebef;
}

.configName {
  align-content: center;
}

.configValue {
  margin-left: auto;
}

.config {
  display: flex;
  margin: 10px;
  width: 750px;
}
</style>
